// SPDX-License-Identifier: GPL-3.0-or-later

import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import Fk
import Fk.Components.LunarLTK
import Fk.Pages.LunarLTK
import Fk.Components.Common
import Qt5Compat.GraphicalEffects
import Fk.Widgets as W

GraphicsBox {
  id: root

  title.text: Util.processPrompt("#sz_wuxing-choose-nature")
  width: body.width + 20
  height: body.height + title.height + 20

  Item {
    id: body
    width: backgroundPic.width
    height: backgroundPic.height
    anchors.top: title.bottom
    x: 10
    
    Image { // 背景
      id: backgroundPic
      fillMode: Image.PreserveAspectCrop
      source: AppPath + "/packages/MahjongSoul/image/misc/sz_wuxing_kong.png"
    }

    Component {
      id: hoverImageComponent
      
      Item {
        id: container
        width: img.width * img.scale
        height: img.height * img.scale
        property string elementName: parent.elementName   // 从Loader的elementName属性绑定
        
        Image {
          id: img
          anchors.centerIn: parent
          source: AppPath + "/packages/MahjongSoul/image/misc/" + container.elementName + ".png"
          scale: mouseArea.containsMouse ? 1.2 : 1.0
          transformOrigin: Item.Center
          
          Behavior on scale {
            NumberAnimation { duration: 200; easing.type: Easing.OutCubic }
          }
        }
        
        MouseArea {
          id: mouseArea
          anchors.fill: img
          hoverEnabled: true
          cursorShape: Qt.PointingHandCursor
           onClicked: {
            close();
            roomScene.state = "notactive";
            ClientInstance.replyToServer("", container.elementName);
          }
        }
      }
    }

    

    // 金(左下)
    Loader {
      x: 71
      y: 311
      sourceComponent: hoverImageComponent
      property string elementName: "sz_jin"
    }

    // 土(右下)
    Loader {
      x: 268
      y: 311
      sourceComponent: hoverImageComponent
      property string elementName: "sz_tu"
    }

    // 火(右上)
    Loader {
      x: 328
      y: 122
      sourceComponent: hoverImageComponent
      property string elementName: "sz_huo"
    }

    // 水(左上)
    Loader {
      x: 7
      y: 122
      sourceComponent: hoverImageComponent
      property string elementName: "sz_shui"
    }

    // 木(中上)
    Loader {
      x: 171
      y: 6
      sourceComponent: hoverImageComponent
      property string elementName: "sz_mu"
    }




  }

}
